﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link href="../../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../../src/test.css" rel="stylesheet" />
	<script src="../../../vendor/js/jquery.js"></script>
	<script src="../../../dist/js/ud2.js"></script>
</head>
<body>

	<h3>范围控件</h3>

	<fieldset>
		<legend>样式</legend>
		<div>
			<h5>默认</h5>
			<p>
				<input type="range" ud2="range" />
			</p>

			<hr class="hr" />

			<h5>带有 setChange 回调的范围控件</h5>
			<p>
				<input type="range" ud2="range" />
			</p>
			<script>
				$(function () {
					ud2.range.collection[1].setChange(function (val) {
						if (val / 10 % 30 < 2) {
							this.style(ud2.style.info);
						}
						else if (val / 10 % 30 < 4) {
							this.style(ud2.style.warning);
						}
						else if (val / 10 % 30 < 6) {
							this.style(ud2.style.success);
						}
						else if (val / 10 % 30 < 8) {
							this.style(ud2.style.danger);
						}
					});
				});
			</script>

			<hr class="hr" />

			<h5>最小值、最大值、步长方案</h5>
			<p>
				<input type="range" ud2="range" step="15.2222" min="-608.376" max="-100.655" />
			</p>

			<hr class="hr" />

			<h5>双手柄</h5>

			<p>
				<input type="range" ud2="range" ud2-range-both="true" step="15" />
			</p>

			<hr class="hr" />

			<h5>尺寸方案</h5>
			<p>
				<input type="range" class="x sm" ud2="range" min="200" max="500" value="200" step="15" />
				<hr class="hr hr-dotted" />
				<input type="range" class="x" ud2="range" min="200" max="500" value="300" step="15" />
				<hr class="hr hr-dotted" />
				<input type="range" class="x lg" ud2="range" min="200" max="500" value="400" step="15" />
			</p>
			
		</div>
	</fieldset>

</body>
</html>
